import React, {Component} from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {PageControl, Colors, View, Button, Text} from 'react-native-ui-lib';
import {
  renderBooleanOption,
  renderSliderOption,
} from '../ExampleScreenPresenter';
import {TestCase, TestSuite} from '@rnoh/testerino';

const containerStyle = {
  marginBottom: 40,
};

export default class PageControlScreen extends Component {
  state = {
    currentPage: 0,
    limitShownPages: false,
    numberOfPagesShown: 7,
  };

  prevPage = () => {
    this.setState({currentPage: this.state.currentPage - 1});
  };

  nextPage = () => {
    this.setState({currentPage: this.state.currentPage + 1});
  };

  onPagePress = (index: number) => {
    this.setState({currentPage: index});
  };

  render() {
    const {currentPage, limitShownPages, numberOfPagesShown} = this.state;

    return (
      <TestSuite name="PageControl">
        <TestCase itShould="例子:">
          <View padding-20>
            <ScrollView
              contentContainerStyle={styles.container}
              showsVerticalScrollIndicator={false}>
              <PageControl
                containerStyle={containerStyle}
                numOfPages={2}
                currentPage={0}
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={5}
                currentPage={2}
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={3}
                currentPage={2}
                color={Colors.red40}
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={10}
                currentPage={4}
                color={Colors.purple40}
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={10}
                currentPage={5}
                color={Colors.violet40}
                size={20}
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={10}
                currentPage={6}
                color={Colors.orange40}
                size={20}
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={10}
                currentPage={6}
                inactiveColor={Colors.grey70}
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={10}
                currentPage={6}
                inactiveColor={Colors.grey70}
                enlargeActive
              />
              <PageControl
                containerStyle={containerStyle}
                numOfPages={10}
                currentPage={6}
                inactiveColor={Colors.grey70}
                enlargeActive
                spacing={10}
              />
              <View marginH-20 width={'100%'}>
                {renderBooleanOption.call(
                  this,
                  'Limit number of pages shown in page control',
                  'limitShownPages',
                )}
                {renderSliderOption.call(
                  this,
                  'Number of pages shown',
                  'numberOfPagesShown',
                  {
                    min: 5,
                    max: 10,
                    step: 1,
                    initial: 7,
                  },
                )}

                <PageControl
                  size={12}
                  spacing={8}
                  limitShownPages={limitShownPages}
                  containerStyle={containerStyle}
                  inactiveColor={Colors.grey60}
                  color={Colors.grey20}
                  numOfPages={numberOfPagesShown}
                  currentPage={currentPage}
                  onPagePress={this.onPagePress}
                />
                <View row flex spread centerV>
                  <Button
                    label={'Prev page'}
                    onPress={this.prevPage}
                    disabled={currentPage === 0}
                  />
                  <Text>{currentPage}</Text>
                  <Button
                    label={'Next page'}
                    onPress={this.nextPage}
                    disabled={currentPage === numberOfPagesShown - 1}
                  />
                </View>
              </View>
            </ScrollView>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    padding: 25,
  },
});
